<template>
	<z-paging ref="paging" :refresher-out-rate="0.8" :show-empty-view-reload-when-error="false"
		:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据" safe-area-inset-bottom bg-color="#F6F6F6" v-model="dataList" @query="queryList">
		<view slot="top">
			<u-tabs :list="navList" @click="click" @change="changeType" :current="current" :scrollable="false"
				:inactiveStyle="inactiveStyle" :activeStyle="activeStyle" lineColor="#588BF3"></u-tabs>
			<view class="search" v-if="current === 0 || current === 3">
				<u-search :placeholder="current === 0 ? '请输关键词' : '请输入推广人姓名'" v-model="keyword" bgColor="#E1E1E1" color="#333"
					placeholderColor="#999999" clearabled height="64rpx" @custom="keywordSearch"
					:actionStyle="actionStyle" />
			</view>
			<view v-if="current === 3">
				<view class="flex_wrap row_center">
					<view class="timeChosseBox" @click="show = true">{{chooseBenTime}}</view>
					<view class="timeChosseBox1">-</view>
					<view class="timeChosseBox" @click="show1 = true">{{chooseTime}}</view>
				</view>
				<u-gap height="10" />
				<view class="cellBox flex_wrap">
					<u-text :text="'总单数：'+` ${orderInfosTotal}`" size="28rpx" color="#333" />
					<u-text :text="'总金额：'+` ${orderInfos}`" size="28rpx" color="#333" align="right" />
				</view>
			</view>
			
			<u-datetime-picker
					:show="show"
					v-model="value"
					mode="date"
					@confirm="startTimeChange"
					@cancel="show = false"
			></u-datetime-picker>
			<u-datetime-picker
				:show="show1"
				v-model="value1"
				mode="date"
				@confirm="endTimeChange"
				@cancel="show1 = false"
			></u-datetime-picker>
		</view>
		<view class="cellBox" v-if="current === 0">
			<view class="detail" v-for="(item, index) in dataList" :key="index">
				<view class="detail_title flex_wrap row_between row_middle">
					<view class="flex_wrap row_middle">
						<u-icon
							:name="item.userCategory == 2 ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/3998c63cd7de4cd0937f9a8b027d0e98.png' : ([3, 4, 5].includes(item.userCategory) ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/b2bd88596c384ee1817c7d845f52f7fb.png' : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/f6ddf5eb988b43209951cd6b4782de43.png' )"
							size="84rpx" />
						<view class="">
							<view class="flex_wrap row_middle">
								<view><u-text :text="item.groupName" size="32rpx" color="#333"
										margin="0 24rpx 0 20rpx" />
								</view>
							</view>
							<u-text :text="` ${item.mobile || '-'}`" size="28rpx" color="#666"
								margin="20rpx 16rpx 0 20rpx" />
						</view>
					</view>
				</view>
				<view class="timeBox"><u-text :text="`时间：` + `${item.createTime}`" size="24rpx" color="#666"
						margin="0 0 0 20rpx" />
				</view>
			</view>
		</view>
		<view v-if="current === 1" style="padding: 0 30rpx">
			<view class="components">
				<view class="head">
					<view class="title">
						<view class="title_line"></view>
						<text class="title_text">个人月销售量</text>
					</view>
				</view>
				<view class="line">
					<l-echart ref="chartLineNum" />
				</view>
			</view>

			<view class="components">
				<view class="head">
					<view class="title">
						<view class="title_line"></view>
						<text class="title_text">个人月销售量(元)</text>
					</view>
				</view>
				<u-cell-group :border="false">
					<u-cell :title="e.statisticalItem" :value="e.statisticalTwoResult" v-for="e in dataList"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view v-if="current === 2" style="padding: 0 30rpx">
			<view class="components">
				<view class="head">
					<view class="title">
						<view class="title_line"></view>
						<text class="title_text">团队月销售量</text>
					</view>
				</view>
				<view class="line">
					<l-echart ref="chartLineNum" />
				</view>
			</view>

			<view class="components">
				<view class="head">
					<view class="title">
						<view class="title_line"></view>
						<text class="title_text">团队月销售量(元)</text>
					</view>
				</view>
				<u-cell-group :border="false">
					<u-cell :title="e.statisticalItem" :value="e.statisticalTwoResult" v-for="e in dataList"></u-cell>
				</u-cell-group>
			</view>
		</view>


		<view v-if="current === 3" style="padding: 0 30rpx">
			<view class="detail" v-for="(item, index) in dataList" :key="index" @click="orderDetail(item)">
				<view class="detail_title flex_wrap row_between row_middle">
					<view class="flex_wrap row_middle">
						<u-icon
							:name="item.goodsName == '购买会员' ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/12/02/9081de61452d4e28ade187b32ac8dc24.png' : (JSON.parse(item.goodsSnapshot).thumbnail)"
							size="100rpx" />
						<view class="">
							<u-text :lines="1" :text="'商品：'+item.goodsName" size="32rpx" color="#333"
								margin="0 16rpx 0 20rpx" />
							<u-text :text="'下单人：'+` ${item.customerName || '-'}${item.customerPhone || '-'}`" size="28rpx" color="#666" margin="28rpx 16rpx 0 20rpx" />
							<u-text :text="'推广人：'+` ${item.promoteSalesmanName || '-'}${item.promoteSalesmanPhone || '-'}`" size="28rpx" color="#666" margin="28rpx 16rpx 0 20rpx" />
						</view>
					</view>
				</view>
				<view class="timeBox">
					<view class="flex_wrap row_between">
						<u-text :text="'商品价格：'+` ${item.goodsPrice || '-'}`" size="24rpx" color="#666"
							margin="0 16rpx 0 20rpx" />
						<u-text :text="'商品数量：'+` ${item.goodsCount || '-'}`" size="24rpx" color="#666"
							margin="0 16rpx 0 20rpx" align="right" />
					</view>
					<view class="flex_wrap row_between">
						<u-text :text="'订单金额：'+` ${item.orderAmount || '-'}`" size="24rpx" color="#666"
							margin="20rpx 16rpx 20rpx 20rpx" />
						<u-text :text="'实付金额：'+` ${item.orderDealAmount || '-'}`" size="24rpx" color="#666"
							margin="20rpx 16rpx 20rpx 20rpx" align="right" />
					</view>
					<u-text :text="`订单号：` + `${item.orderNum}`" size="24rpx" color="#666" margin="0 0 0 20rpx" />
					<u-text :text="`时间：` + `${item.createTime}`" size="24rpx" color="#666" margin="20rpx 0 0 20rpx" />
				</view>
			</view>
		</view>
		<view class="bottom" slot="bottom">
			<u-button v-if="current === 0" text="成员邀请" color="#1682FF" shape="circle" open-type="share" />
		</view>
	</z-paging>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getCustomerInfoByToken,
		teamRelationship,
		teamOrder,
		teamOrderInfo
	} from "@/api/login";
	import * as echarts from "../components/lime-echart/static/echarts.min.js";
	import lEchart from "../components/lime-echart/components/l-echart/l-echart.vue";
	import {
		queryTeamOrderNum,
		queryNewOrderNumOur
	} from "@/api/operate.js";
	import moment from "moment";
		const dayStart = moment(
			new Date(new Date(new Date().toLocaleDateString()).getTime())
		);
		const dataEnd = moment(
			new Date(
				new Date(new Date().toLocaleDateString()).getTime() +
				24 * 60 * 60 * 1000 -
				1
			)
		);
	export default {
		components: {
			lEchart,
		},
		data() {
			return {
				actionStyle: {
					fontSize: "28rpx",
					color: "#333",
				},
				current: 0,
				inactiveStyle: {
					fontSize: "32rpx",
				},
				activeStyle: {
					fontSize: "32rpx",
					fontWeight: "none",
					color: "#588BF3",
				},
				navList: [{
						name: "团队成员",
					},
					{
						name: "本人业绩",
					},
					{
						name: "团队业绩",
					},
					{
						name: "业绩明细",
					},
				],
				keyword: "",
				dataList: [],
				optionLineNum: {
					title: {
						text: "月销售（元）", // 使用富文本格式
						textAlign: "left",
						top: "6%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20),
						},
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top",
					},
					formatter: "{b}：{c}元",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: uni.upx2px(16),
							color: "#165DFF",
							rotate: 40,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#165DFF",
						},
						min: 0,
						// interval: 1000,
						// splitNumber: 5,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB",
							},
						},
					},
					grid: {
						top: "24%",
						left: "12%",
						right: "4%",
						bottom: "20%",
					},
					series: [{
						symbol: "none",
						data: [],
						type: "line",
						lineStyle: {
							color: "#165DFF",
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1, // 渐变方向
								[{
										offset: 0,
										color: "rgba(22, 93, 255, 0.20)"
									}, // 渐变起始色
									{
										offset: 1,
										color: "rgba(22, 93, 255, 0)"
									}, // 渐变结束色，透明
								]
							),
						},
					}, ],
				},
				currentFilterDate: {
					text: "最近1年",
					value: 12,
					type: "months",
				},
				clickTeamId: '',
				groupName: '',
				
				show: false,
				show1: false,
				value: Number(new Date()),
				value1: Number(new Date()),
				chooseTime: this.getCurrentDate(),
				chooseBenTime: '2018-1-1',
				endTime:this.getCurrentDate()+' ' + '00:00:00',
				creatTime:'2018-1-1 00:00:00',
				orderInfos:'0',//总金额
				orderInfosTotal:'0'//条数
			};
		},
		computed: {
			...mapGetters(["isLogin", "phone"]),
		},
		onLoad(op) {
			this.clickTeamId = op.id
			this.groupName = op.groupName
			uni.setNavigationBarTitle({
				title: this.groupName,
			});
			console.log(this.clickTeamId, this.groupName, '点击进来得客户id')
		},

		methods: {
			getCurrentDate() {
			  const now = new Date();
			  return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			},
			startTimeChange(e) {
				const time =
					typeof e.value === "number" ? e.value : Date.parse(e.value);
				this.chooseBenTime = moment(time).format(
					"YYYY-MM-DD"
				);
				this.creatTime = this.chooseBenTime+' ' + '00:00:00'
				this.show = false;
				this.$refs.paging.reload();
			},
			endTimeChange(e) {
				console.log(e,'》》》》')
				const time =
					typeof e.value === "number" ? e.value : Date.parse(e.value);
				this.chooseTime = moment(time).format(
					"YYYY-MM-DD"
				);
				this.endTime = this.chooseTime+' ' + '23:59:59'
				this.show1 = false;
				this.$refs.paging.reload();
			},
			getDate(n, type) {
				// 获取当前日期
				const currentDate = this.$moment();

				// 计算n个月前的日期
				const twelveMonthsAgo = this.$moment(currentDate).subtract(n, type);

				// 获取12个月的开始时间（即12个月前的今天的00:00:00）
				const startDate = twelveMonthsAgo
					.startOf("day")
					.format("YYYY-MM-DD HH:mm:ss");

				// 获取整整12个月的结束时间（即当前时间的23:59:59）
				const endDate = currentDate
					.endOf("day")
					.format("YYYY-MM-DD HH:mm:ss");
				return {
					startDate,
					endDate,
				};
			},
			getParams(currentFilterData) {
				return {
					resultType: currentFilterData.type === "months" ? "mouth" : "day",
					analyzeBegin: this.getDate(
						currentFilterData.value,
						currentFilterData.type
					).startDate,
					analyzeEnd: this.getDate(
						currentFilterData.value,
						currentFilterData.type
					).endDate,
					id: this.clickTeamId,
				};
			},
			async getLineDataNum(params) {
				const result = await queryTeamOrderNum(params);
				this.optionLineNum.series[0].data = result.data.map((item) => {
					return item.statisticalTwoResult;
				});
				this.optionLineNum.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
				this.dataList = result.data;
			},
			async getOrderNumOur(params) {
				const result = await queryNewOrderNumOur(params);
				this.optionLineNum.series[0].data = result.data.map((item) => {
					return item.statisticalTwoResult;
				});
				this.optionLineNum.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
				this.dataList = result.data;
			},
			changeType(e) {
				this.$refs.paging.reload();
			},
			click(e) {
				console.log("e :>> ", e);
				this.current = e.index;
			},
			keywordSearch() {
				this.$refs.paging.reload();
			},
			async queryList(pageNo, pageSize) {
				if (!this.current) {
					let params = {
						pageNum: pageNo,
						pageSize: pageSize,
						groupParentId: this.clickTeamId
					};
					if (this.keyword) params.groupName = this.keyword;
					let result = await teamRelationship(params);
					result.code === 200 &&
						this.$refs.paging.completeByTotal(
							result.data.rows,
							result.total
						);
				} else if (this.current == 1) {
					const that = this;
					const paramsLine = this.getParams(this.currentFilterDate);
					this.getOrderNumOur(paramsLine).then(() => {
						that.$refs.chartLineNum.init(echarts, (chart) => {
							chart.setOption(that.optionLineNum);
						});
					});
				} else if (this.current == 2) {
					const that = this;
					const paramsLine = this.getParams(this.currentFilterDate);
					this.getLineDataNum(paramsLine).then(() => {
						that.$refs.chartLineNum.init(echarts, (chart) => {
							chart.setOption(that.optionLineNum);
						});
					});
				} else {
					let params = {
						pageNum: pageNo,
						pageSize: pageSize,
						groupPromoteSalesmanId: this.clickTeamId
					};
					if (this.keyword) params.promoteSalesmanName = this.keyword;
					if (this.creatTime) params.createdAtBegin = this.creatTime;
					if (this.endTime) params.createdAtEnd = this.endTime;
					let result = await teamOrder(params);
					this.orderInfosTotal = result.data.total
					result.code === 200 &&
						this.$refs.paging.completeByTotal(
							result.data.rows,
							result.total
						);
					
					let orderInfos = await teamOrderInfo(params);
					this.orderInfos = orderInfos.data.amount
					console.log(this.orderInfosTotal,result,this.orderInfos,orderInfos)
				}
			},
			async onShareAppMessage(res) {
				await getCustomerInfoByToken({
						id: this.$store.getters?.userInfo.id
					})
					.then(async (res) => {
						this.customerId = res.data.id
						console.log(res, this.customerId)
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
				return {
					title: "向您发起了一份邀请",
					imageUrl: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/customer/album/2024/04/29/fdb814b99baf4f949f7c6e4a9198b56e.png",
					path: "pages_my1/beSalesman/index?salesmanId=" +
						this.customerId,
				};
			},
		},
	};
</script>

<style lang="scss" scoped>
	.topTabbar {
		background-color: #fff;
		padding-bottom: 16rpx;
	}

	.scanLine {
		width: 0rpx;
		height: 26rpx;
		border: 2rpx solid #d8d8d8;
	}

	.cellBox {
		width: 92vw;
		margin: 0 auto;

		::v-deep .u-cell {
			box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
			margin-top: 30rpx;
			border-radius: 20upx;
		}

		::v-deep .u-cell__body {}
	}

	.search {
		padding: 32rpx 28rpx 0;
	}

	.timeBox {
		padding: 18rpx 30rpx;
		border-top: 1px solid #f7f7f7;
	}

	.detail {
		width: 100%;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-top: 32rpx;
		background: #ffffff;

		&_title {
			width: 100%;
			padding: 26rpx 28rpx;
			box-sizing: border-box;
			position: relative;
		}

		&_title1 {
			width: 100%;
			padding: 18rpx;
			box-sizing: border-box;
			position: relative;
		}
	}

	.auditing,
	.auditing1 {
		width: 116rpx;
		height: 48rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 2rpx solid #ff6a43;
		text-align: center;
		line-height: 48rpx;
		color: #ff6a43;
	}

	.auditing1 {
		border: 2rpx solid #588bf3;
		color: #588bf3;
	}

	.bottom {
		width: 100%;
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.title {
		display: flex;
		align-items: center;

		&_line {
			width: 8rpx;
			height: 28rpx;
			border-radius: 200rpx;
			background-color: #588bf3;
			margin-right: 20rpx;
		}

		&_text {
			font-weight: bold;
			color: #333;
			font-size: 28rpx;
		}
	}

	.components {
		width: 100%;
		height: auto;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 32rpx 28rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;
		}

		.line {
			width: 100%;
			height: 320rpx;
			margin-top: 20rpx;
		}

		.canvas {
			width: 100%;
			height: 100%;
		}
	}
	.timeChosseBox{
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #E1E1E1;
		border-radius:40rpx;
		text-align: center;
		margin-top: 32rpx;
	}
	.timeChosseBox1{
		width: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-top: 32rpx;
	}
</style>